import '../../behavior-scene/alpha-aisle'

Component({
  behaviors: [
    require('../common/share-behavior').default],
  properties: {
    markerImg: {
      type: String
    },
    videoUrl:{
      type:String
    }
  },
  data: {
    loaded: false,
    arReady: false,
    isMash:false,
    videoPosition: 0 // 保存视频的当前位置
  },
  lifetimes: {
    async attached() {
      console.log('data', this.data);
    }
  },
  methods: {
    handleReady: async function ({detail}) {
      const xrScene = this.scene = detail.value;
      console.log('xr-scene', xrScene);
      this.shadowRoot = this.scene.getElementById('shadow-root');
      this.xrFrameSystem = wx.getXrFrameSystem();
    },

    handleAssetsProgress: function ({detail}) {
      console.log('assets progress', detail.value);
    },

    handleAssetsLoaded: function ({detail}) {
      console.log('assets loaded', detail.value);
      this.setData({
        loaded: true,
      });
    },

    handleTrackerSwitch: function ({detail}) {
      const active = detail.value;
      console.log('handleTrackerSwitch', detail);
      // let video = this.scene.assets.getAsset('video-texture', 'hikari');
      if (active) {
        if(!this.data.isMash){
          this.loadMaterial()
        }
        // video.play();
      } else {
        // this.setData({ videoPosition: video.currentTime }); // 保存当前播放位置
        // video.stop();
      }
    },
    loadMaterial: async function(){
      let asset = this.scene.assets.getAsset('video-texture', 'hikari');
      if(!asset){
        const v = await this.scene.assets.loadAsset({
          type: 'video-texture', assetId: 'hikari', src: this.properties.videoUrl,
          options: { 
            autoPlay: true, 
            abortAudio: false,
            loop: true
          }
      });
      asset = v.value;
      }

      const effect = this.scene.assets.getAsset('effect', 'screen')
      const mat = await this.scene.createMaterial(
        // 使用内置的 Standard 效果
        effect,
        {u_videoMap: asset.texture}
      );
      this.scene.assets.addAsset('material', 'mat', mat);

      const el = this.scene.createElement(this.xrFrameSystem.XRMesh, 
        { 
          geometry: 'plane', 
          // uniforms: `u_baseColorMap:video-${targetId}`,
          // uniforms: `u_videoMap:video-${targetId}`,
          material:'mat',
          // states:"renderQueue:2500",
          // 'position':'-0.02 0 0.01',
        });
      el.setId("player");
      this.shadowRoot.addChild(el);
      this.data.isMash = true;
    }
  }
})
